<template>
  <div>
    <sys-dialog
      :title="prentDialog.title"
      :width="prentDialog.width"
      :height="prentDialog.height"
      :visible="prentDialog.visible"
      @onClose="onParentClose"
      @onConfirm="onParentConfirm">
      <div slot="content">
        <el-tree
          style="font-size: 14px"
          ref="parentTree"
          :data="parentMenuList"
          node-key="id"
          :props="defaultProps"
          empty-text="暂无数据"
          :show-checkbox="false"
          default-expand-all
          :highlight-current="true"
          :expand-on-click-node="false"
          @node-click="handleNodeClick">
          <div class="customer-tree-node" slot-scope="{ node, data }">
            <span v-if="data.children.length == 0">
              <i
                class="el-icon-document"
                style="color: #8c8c8c; font-size: 20px" />
            </span>
            <span v-else @click.stop="openBtn(data)">
              <svg-icon
                style="font-size: 25px"
                v-if="data.open"
                icon-class="add-s" />
              <svg-icon style="font-size: 20px" v-else icon-class="sub-s" />
            </span>
            <span>{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </sys-dialog>
  </div>
</template>

<script>
import SysDialog from '@/components/system/SysDialog.vue'
import { getParentTreeApi } from '@/api/menu'
export default {
  components: {
    SysDialog
  },
  data() {
    return {
      // 上级菜单弹框属性
      prentDialog: {
        title: '选择上级菜单',
        width: 280,
        height: 450,
        visible: false
      },
      // 上级菜单
      parentMenuList: [],
      // 树属性定义
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async show() {
      this.prentDialog.visible = true
      let res = await getParentTreeApi()
      if (res && res.code === 200) {
        this.parentMenuList = res.data
      }
    },
    onParentConfirm() {
      this.prentDialog.visible = false
    },
    // 选择上级菜单取消事件
    onParentClose() {
      // this.$emit('NodeClick', { id: '', label: '' })
      this.prentDialog.visible = false
    },
    // 上级菜单节点点击事件
    // 这个事件按照正常规范还要写在确认按钮点击的时候才传递
    // 这里单独定义这个事件就是为了测试传值，不推荐实际开发使用
    // 会造成代码逻辑有问题
    handleNodeClick(data) {
      // console.log(data)
      this.$emit('NodeClick', data)
    },
    openBtn(data) {
      data.open = !data.open
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree {
  // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }
  // 子集像右偏移 给数线留出距离
  .el-tree-node__children {
    padding-left: 20px;
  }
  //这是竖线
  .el-tree-node :last-child:before {
    height: 40px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  //这自定义的线 的公共部分
  .el-tree-node:before,
  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before {
    border-left: none;
  }
  // 竖线
  .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
  }
  //横线
  .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  }
  //去掉elementui自带的展开按钮  一个向下的按钮,打开时向右
  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }
  //每一行的高度
  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
}
//去掉最上级的before  after 即是去电最上层的连接线
::v-deep .el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
</style>
